<template>
  <div id="app">
    <van-sticky>
      <van-nav-bar
        v-show="isShowNavbar"
        style="background: #78669c"
        :left-text="appStore.navLeftText"
        :right-text="appStore.navRightText"
        :left-arrow="appStore.navLeftArrow"
        @click-left="appStore.navLeftClick"
        @click-right="appStore.navRightClick"
      >
        <template #title>
          <span style="color: #fff">{{ appStore.navTitle }}</span>
        </template>
      </van-nav-bar>
    </van-sticky>

    <RouterView class="app-container" />
    <tabbar v-show="isShowTabBar"></tabbar>
  </div>
</template>

<script setup>
import { reactive, toRefs, watch, computed } from "vue";
import { useRouter, RouterView, useRoute } from "vue-router";
import { useAppStore, useUserStore } from "./stores";
import tabbar from "@/components/CustomTabbar/Index.vue";
import { createPinia } from "pinia";
import { showDialog } from "vant";
import { showToast, showSuccessToast } from "vant";
const router = useRouter();
const route = useRoute();
const appStore = useAppStore();

const state = reactive({
  transitionName: "slide-left",
});

router.beforeEach((to, from) => {
  if (to.meta.index > from.meta.index) {
    state.transitionName = "slide-left"; // 向左滑动
  } else if (to.meta.index < from.meta.index) {
    // 由次级到主级
    state.transitionName = "slide-right";
  } else {
    state.transitionName = ""; // 同级无过渡效果
  }

  appStore.resetAppNav();
});

watch(
  () => route.name,
  () => {
    if (
      !["home", "libraryModel", "task", "shopping", "personage"].includes(
        route.name
      )
    )
      appStore.setAppNav("navLeftArrow", true);
  }
);

const currentRouter = router.currentRoute.value;

const isShowNavbar = computed(() => {
  const routerName = router.currentRoute.value.name;
  if (routerName == "personage") {
    return false;
  } else {
    return true;
  }
});

const isShowTabBar = computed(() => {
  let showTabbar = false;

  const routerName = router.currentRoute.value.name;

  if (
    ["home", "libraryModel", "task", "shopping", "personage"].includes(
      routerName
    )
  ) {
    showTabbar = true;
  } else {
    showTabbar = false;
  }
  return showTabbar;
});

const userStore = useUserStore();
userStore.initializeStore();
</script>

<style lang="less">
html,
body {
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
}
#app {
  height: 100%;
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}
.app-container {
  height: calc(100vh - 114px);
  //   top: 46px;
  padding: 10px;
}

.router-view {
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: 0 auto;
  -webkit-overflow-scrolling: touch;
}

.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
  height: 100%;
  will-change: transform;
  transition: all 500ms;
  position: absolute;
  backface-visibility: hidden;
}
.slide-right-enter {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
.slide-right-leave-active {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.slide-left-enter {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.slide-left-leave-active {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}

.van-badge--fixed {
  z-index: 1000;
}
</style>
